<template>
    <div id="container">
        <div id="header" >
        </div>
        <div id="container">
            <div id="content2">
                <table width="100%" height="41" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="15" height="18" align="left" valign="top">
                            <div align="left"></div>
                        </td>
                        <td width="385" align="left" valign="bottom" class="12">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="4" colspan="2" align="left" valign="bottom"></td>
                    </tr>
                    <tr>
                        <td height="15" align="left" valign="top">&nbsp;</td>
                        <td height="15" align="left" valign="top" class="12">
                            <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="20">
                                        <div class="right_proaducts">我的位置&gt;&gt;科技项目申报&gt;登录用户列表<br/>
                                            <br/>
                                        </div>
                                        <form action="" method="post" id="form">
                                            <DIV class=padding>
                                                <DIV id=middlebody>
                
                                            
                                            
                                                        <el-table 
                                                        :data="experts"
                                                        :row-class-name="tableRowClassName"
                                                        >
                                                                <el-table-column label="编号id" prop="expertid"></el-table-column>
                                                                <el-table-column label="姓名" prop="name"></el-table-column>
                                                                <el-table-column label="单位名称" prop="unitname"></el-table-column>
                                                                <el-table-column label="职称" prop="title"></el-table-column>
                                                                <el-table-column label="国籍" prop="nation"></el-table-column>
                                                                <el-table-column label="性别" prop="sex"></el-table-column>
                                                                <el-table-column label="电话" prop="tel"></el-table-column>
                                                                <el-table-column label="简介" prop="introduction"></el-table-column>
                                                                <el-table-column label="操作">
                                                                    <template slot-scope="scope">
                                                                        <el-row>
                                                                            <el-button type="danger" @click="deleteByIds(scope.row)">删除</el-button>
                                                                            <el-button type="danger" @click="update(scope.row)">修改</el-button>
                                                                        </el-row>
                                                                    </template>
                                                                </el-table-column>
                                                            </el-table>
                                                            <el-pagination
                                                            :total="total"
                                                            :page-size="usersPage.pageSize"
                                                            :current-page="usersPage.currentPage"
                                                            layout="prev,pager,next,jumper,sizes,->,total"
                                                            :page-sizes="[2,3,4,5]"
                                                            @current-change="currentChange"
                                                            @size-change="sizeChange"
                                                            ></el-pagination>



                                                             <!-- 更新-->
                                                    <!--更新数据对话框表单-->
                                                    <el-dialog
                                                            title="更新"
                                                            :visible.sync="updateVisible"
                                                            width="30%"
                                                    >
                                                        <el-form ref="form" :model="updateEx" label-width="80px">
                                                            <el-form-item label="编号id">
                                                                <el-input v-model="updateEx.expertid"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="姓名">
                                                                <el-input v-model="updateEx.name"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="单位名称">
                                                                <el-input v-model="updateEx.unitname"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="职称">
                                                                <el-input  v-model="updateEx.title"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="国籍">
                                                                <el-input  v-model="updateEx.nation"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="性别">
                                                                <el-input  v-model="updateEx.sex"></el-input>
                                                            </el-form-item>
                                                            
                                                            <el-form-item label="电话">
                                                                <el-input  v-model="updateEx.tel"></el-input>
                                                            </el-form-item>
                                                            
                                                            <el-form-item label="简介">
                                                                <el-input type="textarea" v-model="updateEx.introduction"></el-input>
                                                            </el-form-item>

                                                            <el-form-item>
                                                                <el-button type="primary" @click="updateExpert()">提交</el-button>
                                                                <el-button @click="updateVisible = false">取消</el-button>
                                                            </el-form-item>
                                                        </el-form>

                                                    </el-dialog>
                                                    
                                                </DIV>
                                            </DIV>
                                        </form>
                                    </td>
                                </tr>
                            </table>
                            <br/>
                            <div class="table_wz"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import axios from '../../utils/Myaxios'
const options = {
    data(){
        return{
            total:0,
            experts:[],
            usersPage:{
                currentPage: 1,
                pageSize: 3
            },
            updateVisible: false,
            updateEx:{
                expertid:'',
                uid:'',
                name:'',
                nation:'',
                sex:'',
                tel:'',
                introduction:''
            }
        }
    },
    mounted(){
        this.get();
    },
    methods:{
        async get(){
            const _axios = axios.create({
                baseURL:'http://localhost:8080',
                withCredentials:true
            })
            const resp = await _axios.get('/experts/all',{
                params:this.usersPage
            });
            this.experts = resp.data.data.records;
            this.total = resp.data.data.total;
            // console.log(resp)
        },
        sizeChange(size){
            this.usersPage.pageSize = size;
            this.get();
        },
        currentChange(page){
            this.usersPage.currentPage = page;
            this.get();        
        },
         // 每行颜色
         // eslint-disable-next-line no-unused-vars
         tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'warning-row';
        } else if (rowIndex === 2) {
          return 'success-row';
        }
        return '';
      },

    //   数据回显
    update(row){
        this.updateEX={
            expertid: row.expertid,
                uid:row.uid,
                name:row.name,
                nation:row.nation,
                sex:row.sex,
                tel:row.tel,
                introduction:row.introduction
            },
            this.updateVisible = true;
        },
        // 更新数据提交
        async updateExpert(){
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            await _axios.post('/experts/update',{},{
                params:{
                    update:this.updateEX
                }
            })
        },
        
        async deleteByIds(row){
            let rowId = [row.id]
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            await _axios.post('/experts/delete',{},{
                params:{
                    expertid: rowId
                }
            })
        }

    
    }
}
export default  options;
</script>

<style>
@import '../../assets/static/andreasblue.css';

.el-table .warning-row {
    background: cornflowerblue
  }

.el-table .success-row {
    background: gray
  }

</style>